<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>层叠幻灯片</title>
		<style>
			body,ul{margin: 0; padding: 0;}
			li{list-style: none; float: left;}
			img{width: 1920px; height: 400px; vertical-align: top; border: 0;}
			.m-banner{position: relative; width: 1000px; height: 400px; overflow: hidden;}
			.m-banner-ct{position: absolute; top: 0; left: -460px; height: 400px;}
		</style>
	</head>

	<body>
		<div id="J_Banner" class="m-banner">
			<!-- 广告内容 -->
			<ul class="m-banner-ct">
				<li>
					<a href="http://www.shiyanlou.com" target="_blank">
						<img src="static/img/banner/1.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="http://www.shiyanlou.com" target="_blank">
						<img src="static/img/banner/2.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="http://www.shiyanlou.com" target="_blank">
						<img src="static/img/banner/3.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="http://www.shiyanlou.com" target="_blank">
						<img src="static/img/banner/4.jpg" alt="">
					</a>
				</li>
				<li>
					<a href="http://www.shiyanlou.com" target="_blank">
						<img src="static/img/banner/5.jpg" alt="">
					</a>
				</li>
			</ul>
		</div>

		<script src="static/common/js/jquery/jquery-1.9.1.min.js"></script>
		<script src="static/common/js/jquery/plugs/Xslider.js"></script>
		<script type="text/javascript">
			// 焦点图片淡隐淡现
$("#J_Banner").Xslider({
    affect:'fade',
    ctag: 'li', //内容标签 默认为<a>
    speed: 800, //动画速度
    space: 1000, //时间间隔
    auto: true, //自动滚动
    trigger: 'mouseover', //触发事件 注意用mouseover代替hover
    conbox: '.m-banner-ct', //内容容器id或class
    switcher: '', //切换触发器id或class
    stag: '', //切换器标签 默认为a
    current:'cur', //当前切换器样式名称
    rand:false //是否随机指定默认幻灯图片
});
		</script>
	</body>

</html>